<!--
 * @Author: DaHuaZhuXi
 * @Date: 2020-09-30 20:51:09
 * @LastEditTime: 2020-11-26 16:12:14
 * @LastEditors: DaHuaZhuXi
 * @Description: 
-->
<template>
  <div component="footerNav">
    <van-tabbar v-model="active">
      <van-tabbar-item id="f_home" @click="clickBtn('home')" icon="location-o">地图</van-tabbar-item>
      <van-tabbar-item id="f_team" to="/MyTeam" icon="friends-o">队伍</van-tabbar-item>
      <van-tabbar-item id="f_team" to="/MyTask" icon="friends-o">任务</van-tabbar-item>
      <van-tabbar-item id="f_team" to="/MyBackpack" icon="friends-o">背包</van-tabbar-item>
      <!-- <van-tabbar-item id="f_market" to="/city/market" icon="shop-o">商店</van-tabbar-item>
      <van-tabbar-item id="f_tavern" to="/city/tavern" icon="flag-o">招募</van-tabbar-item> -->
      <van-tabbar-item id="f_option" icon="setting-o">系统</van-tabbar-item>
    </van-tabbar>

    <van-action-sheet v-model="showOption" :actions="actions" cancel-text="取消" @select="onSelect" />

  </div>
</template>

<script>
  export default {
    data() {
      return {
        active: -99,
        showOption: false,
        actions: [
          { name: '存档' },
          { name: '读档' },
          { name: '设置' },
          { name: '开始菜单' }
        ]
      }
    },
    mounted() {
      if (this.$route.fullPath.indexOf("/Option") != -1) {
        this.active = 4;
      } else if (this.$route.fullPath.indexOf("/MyBackpack") != -1) {
        this.active = 3;
      } else if (this.$route.fullPath.indexOf("/MyTask") != -1) {
        this.active = 2;
      } else if (this.$route.fullPath.indexOf("/MyTeam") != -1) {
        this.active = 1;
      } else if (this.$route.fullPath.indexOf("/WorldMap") != -1) {
        this.active = 0;
      }
      document.getElementById("f_option").onclick = () => {
        this.showOption = true
      }
    },
    methods: {
      clickBtn(type){
        if(type == "home" && this.$route.path != "/WorldMap"){
          //如果在迷宫状态
          if(this.$route.path == "/Maze"){
            this.$dialog.confirm({
              title: `退出迷宫`,
              message: `确定原路返回，并退出当前迷宫吗？`,
            }).then(() => {
              this.$router.push("/WorldMap")
            }).catch(() => {
              this.active = -99;
            });
          }else{
            this.$router.push("/WorldMap")
          }
        }
      },

      onSelect(item) {
        this.showOption = false;
        switch (item.name) {
          case "存档":
            this.$router.push('/Option/Save');
            break;
          case "读档":
            this.$router.push('/Option/Load');
            break;
          case "设置":
            this.$router.push('/Option/Setting');
            break;
          case "开始菜单":
            this.$router.push('/');
            break;
        }

      }
    },
  }
</script>

<style>
  .van-tabbar-item {
    color: #fff;
  }

  .van-tabbar-item--active {
    color: #07C160;
  }
</style>
